<template>
	<view class="page">
		<view style="height:60rpx;line-height:60rpx;color:#999;margin:0 20rpx;">
			任务编号：{{orderInfo.taskNumber||""}}
		</view>
		<view style="background-color: #fff;padding:30rpx;">
			<view style="font-size:28rpx;text-align:right;font-weight:bold;margin-bottom:20rpx;"
				:style="{color:taskStateStyle(orderInfo.taskState)}">
				{{orderInfo.taskState|taskStateName}}
			</view>
			<u-row style="line-height:60rpx;">
				<u-col :span="4">
					<text style="color:#999;">工种</text><br /><text
						style="font-size:35rpx;">{{orderInfo.taskTypeName||"无"}}</text>
				</u-col>
				<u-col :span="4">
					<text style="color:#999;">预算(元)</text><br /><text
						style="font-size:35rpx;">{{orderInfo.budget||"无"}}</text>
				</u-col>
				<u-col :span="4">
					<text style="color:#999;">工期(天)</text><br /><text
						style="font-size:35rpx;">{{orderInfo.duration||"无"}}</text>
				</u-col>
			</u-row>

			<view style="margin:40rpx 0;line-height:60rpx;">
				<view style="letter-spacing:2rpx;color:#616679;display:flex;align-items:center;">
					<u-icon size="30" name="account" style="margin-right:10rpx;"></u-icon>
					<text>{{orderInfo.contacts||""}}</text>
				</view>
				<view style="letter-spacing:2rpx;color:#616679;display:flex;align-items:center;">
					<u-icon size="32" name="phone" style="margin-right:10rpx;"></u-icon>
					<text>{{orderInfo.mobile||""}}</text>
				</view>
				<view style="letter-spacing:2rpx;color:#616679;display:flex;align-items:center;">
					<u-icon size="35" name="map" style="margin-right:10rpx;"></u-icon>
					<text>{{orderInfo.taskAddress||""}}</text>
				</view>
			</view>

			<view style="line-height: 40rpx;color:#9195a4;">{{orderInfo.introduction||'该订单无特殊招工要求'}}</view>
			<u-line margin="40rpx 0" color="#E1E8FB" />
			<u-row>
				<u-col :span="4" v-for="item in taskPicture">
					<image style="width:100%;height:200rpx;border-radius:15rpx;" :src="item" mode="aspectFill">
					</image>
				</u-col>
			</u-row>
		</view>

		<u-toast ref="uToast" />
		<view style="height:70px;"></view>
		<view class="footer-class">
			<view style="display:flex;align-items:center;width:200rpx;justify-content:center;">
				<u-icon name="zhuanfa" size="33"></u-icon>
				<u-button :custom-style="customStyle" open-type="share" :hair-line="false">分享</u-button>
			</view>
			<view class="jiedan-btn" @click="jiedan()"> 接 单 </view>
		</view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				customStyle: {
					border: 0,
					color: '#222',
					fontSize: '29rpx',
					padding: 0,
					marginLeft: '5rpx'
				},
				orderId: "",
				orderInfo: {},
				taskPicture: [],
			}
		},
		onLoad(data) {
			this.orderId = data.id
			this.$u.api.getTaskById({
				id: data.id
			}).then(res => {
				this.orderInfo = res
				this.taskPicture = res.taskPicture.split(",")
			})
		},
		methods: {
			jiedan() {

			},
			taskStateStyle(val) {
				// 1接单中 2施工中 3已完工 4已评价 9已删除
				let name = ""
				if (val == 1) {
					name = "#3D99F5"
				} else if (val == 2) {
					name = "#ff9b06"
				} else if (val == 3) {
					name = "#19be6b"
				} else if (val == 4) {
					name = "#19be6b"
				} else if (val == 9) {
					name = "#ff0000"
				}
				return name
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: orderInfo.taskNumber,
				path: '/pages/order/homeTaskDetail?id=' + this.orderId
			}
		},
		filters: {
			taskStateName(val) {
				// 1接单中 2施工中 3已完工 4已评价 9已删除
				let name = ""
				if (val == 1) {
					name = "接单中"
				} else if (val == 2) {
					name = "施工中"
				} else if (val == 3) {
					name = "已完工"
				} else if (val == 4) {
					name = "已评价"
				} else if (val == 9) {
					name = "已删除"
				}
				return name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100%;
		background-color: #f8f9fb;
		color: #222;
		font-size: 27rpx;
	}

	.footer-class {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 50px;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #dadada;
		background-color: #fff;
	}

	.jiedan-btn {
		color: #fff;
		flex-grow: 1;
		background-color: #2979ff;
		text-align: center;
		margin-right: 40rpx;
		padding: 18rpx 0;
		border-radius: 15rpx;
		font-size: 32rpx;
	}
</style>
